<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>
    <style>
       /* .targetDiv {
            width: 222px;
            height: 220px;
            background-color: black;
            display: none;
        }
        div button {
            width: 20px;
            height: 20px;
            border: 1px solid red;
        } */   
    </style>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <!-- 必须引入jquery库 -->
</head>

<body>
    <!-- 使用<input type="checkbox">代替<button>来处理选中状态 -->
    <input type="checkbox" class="checkall" id="checkAll">
    <input type="checkbox" class="j-checkbox">
    <input type="checkbox" class="j-checkbox">
    
    <script>
        $(function () {
            // 使用更具体的id选择器代替类名选择器，提高选择器的效率
            $("#checkAll").on('change', function() {
                // 获取当前复选框的选中状态
                let isChecked = $(this).is(':checked');
                // 仅当状态改变时才进行操作，提高性能
                if ($(this).data('prevState') !== isChecked) {
                    $(".j-checkbox").prop("checked", isChecked);
                    // 更新数据属性以防止不必要的重复操作
                    $(this).data('prevState', isChecked);
                }
            });
        });
    </script>
 <!-- <div class="targetDiv">
// </div>
// <button></button>
// <button></button>
// <button></button> -->
 <!-- <div class="nav">
//     <ul>
//         <li>
//             <ul class="dropdown">  
//             <li>Subitem 1</li>  
//             <li>Subitem 2</li> </ul>
//         </li>
//         <li> <ul class="dropdown">  
//             <li>Subitem 3</li>  
//             <li>Subitem 4</li> </li>
//     </ul>
// </div>
//   <script>
//     $(function(){
//         $(".nav>li").hover(function(){
//             $(this).children(".dropdown").stop().slideDown(500);
//         },function(){
//             $(this).children(".dropdown").stop().slideUp(500);
//         })}
// )
//      -->
 <!-- //     $(function() {
//         $(".targetDiv").removeAttr('style').css({
//         width: 400,
//         height: 400,
//         backgroundColor: "black"});
//         $("div").css({
//  width: 400,
//  height: 400,
// backgroundColor: "green"
//        });

//     $("button").eq(1).click(function(){
//         $(".targetDiv").fadeIn(1000);
//        }); /* 盒子一开始隐藏才可以实现其效果 */
//        $("button").eq(0).click(function(){
//         $(".targetDiv").fadeOut(1000);
//        })
//     ;
//     $("button").eq(2).click(function(){
//         $(".targetDiv").fadeToggle(1000,0.5);
//     })
// }) -->
 
</body>
</html>